<template>
  <div>
    <!-- 
      pinia:
        是一个集中的状态管理工具，和vuex是一样的。
        语法：
          1）选项式API
          2）组合式API 
        支持：
          vue2
          vue3
          调试工具
          ts  
        vuex只能有一个仓库，pinia可以有N个仓库。
          1）可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。
          2）管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。

      使用：
        1）yarn add pinia       or       npm i pinia

      总结： 
        1）通过 const useXxxStore = defineStore('id',函数) 创建仓库得到使用仓库的函数
        2）   vuex                          pinia 
             state                      ref 或  reactive
             getters                    computed 创建的计算属性
           mutations 和 actions         普通函数，同步异步均可
        3）使用Pinia与在组件中维护数据大体相同，这就是 Pinia 的状态管理基本使用
     -->

    <!-- <p>{{ store.count }} {{ store.doubleCount }}</p> -->
    <!-- <button @click="store.update()">count++</button> -->
    <!-- <button @click="store.asyncUpdate()">async update</button> -->

    <p>{{ count }} {{ doubleCount }}</p>
    <button @click="update()">count++</button>
    <button @click="asyncUpdate()">async update</button>
  </div>
</template>

<script setup>
import { useCounterStore } from "../store/counter";
import { storeToRefs } from "pinia";

// const store = useCounterStore();

// 解构会导致响应式丢失
// 解决：storeToRefs
// storeToRefs(useCounterStore()) 保持响应式

const store = useCounterStore();
const { update, asyncUpdate } = store;
const { count, doubleCount } = storeToRefs(store);
</script>

<style lang="scss" scoped>
</style>